<template>
  <AppHeader :active="''" :articleName="data.title"></AppHeader>
  <div v-show="hasToken">
    <div
      style="display: inline-block; position: fixed; z-index: 10000000; right: 40px; bottom: 40px"
    >
      <div class="btn btn-lg btn-circle" @click="$router.push('/editor/' + id)">
        <span>
          <svg-icon :path="mdiPencil" type="mdi"></svg-icon>
        </span>
      </div>
    </div>
  </div>

  <div class="container mx-auto mt-4 card shadow">
    <v-md-preview :text="text" height="100vh"></v-md-preview>
  </div>

  <AppFooter></AppFooter>
</template>

<script setup>
import { defineProps, reactive, ref, toRefs } from 'vue'
import SvgIcon from '@jamescoyle/vue-icon'
import { mdiPencil } from '@mdi/js'
import { apiGetArticlesPublic } from '@/http/article'
import { getToken } from '@/utils/auth'
import AppHeader from '@/components/AppHeader.vue'
import AppFooter from '@/components/AppFooter.vue'

const hasToken = getToken() !== null

const props = defineProps({
  id: Number
})

const data = reactive({
  content: '',
  title: ''
})

const { id } = toRefs(props)

const text = ref('')

const initData = async () => {
  apiGetArticlesPublic(id.value).then((res) => {
    data.content = res.data.content
    data.title = res.data.title
    window.document.title = data.title
    text.value = data.content
  })
}

initData()
</script>
